<template>
  <div class="box">

    <div id="pdfDomWrong" class="center pdf-panel-answers">
      <div class="topicBox">
        <div class="topicBottom">
          <div class="topicBottomContent">
            <div>
              <div v-for="xiao in testQuestionsInFo" class="xiaoItem">

                <div :style="{height:!isAnswers?`1415px`:''}" class="xiaoContent">
                  <!-- 单选 -->
                  <template v-if="xiao.itemInfo.questionTypes == '单选题'">
                    <div
                      class="xiaoStem"
                      v-html="xiao.itemInfo.testItemContent"
                    ></div>
                    <div class="xiaoOption">
                      <div
                        v-for="option in xiao.itemInfo.answerList"
                        class="xiaoOptionItem"
                      >
                        <el-radio :label="option.identifier" disabled>{{
                            option.identifier
                          }}
                        </el-radio>
                        <div class="optionInput">
                          <div v-html="option.answerContent"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="isAnswers" class="analysisBox">
                      <div class="analyTitle">解析详情</div>
                      <div
                        class="anlysisHtml"
                        v-html="xiao.itemInfo.analysis"
                      ></div>
                    </div>
                  </template>
                  <!-- 单选 -->
                  <!-- 多选 -->
                  <template v-if="xiao.itemInfo.questionTypes == '多选题'">
                    <div
                      class="xiaoStem"
                      v-html="xiao.itemInfo.testItemContent"
                    ></div>
                    <div class="xiaoOption">
                      <div
                        v-for="option in xiao.itemInfo.answerList"
                        class="xiaoOptionItem"
                      >
<!--                        :checked="-->
<!--                        xiao.itemInfo.answerJ.includes(option.identifier)-->
<!--                        "-->
                        <el-checkbox
                          :label="option.identifier"
                          disabled
                        >{{ option.identifier }}
                        </el-checkbox
                        >
                        <div class="optionInput">
                          <div v-html="option.answerContent"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="isAnswers" class="analysisBox">
                      <div class="analyTitle">解析详情</div>
                      <div
                        class="anlysisHtml"
                        v-html="xiao.itemInfo.analysis"
                      ></div>
                    </div>
                  </template>
                  <!-- 多选 -->
                  <!-- 判断 -->
                  <template v-if="xiao.itemInfo.questionTypes == '判断题'">
                    <div
                      class="xiaoStem"
                      v-html="xiao.itemInfo.testItemContent"
                    ></div>
                    <div class="xiaoOption" style="margin: 15px 0">
                      <el-radio label="1">正确</el-radio>
                      <el-radio label="2">错误</el-radio>
                    </div>
                    <div v-if="isAnswers" class="analysisBox">
                      <div class="analyTitle">解析详情</div>
                      <div
                        class="anlysisHtml"
                        v-html="xiao.itemInfo.analysis"
                      ></div>
                    </div>
                  </template>
                  <!-- 判断 -->
                  <!-- 应用 -->
                  <template v-if="xiao.itemInfo.questionTypes == '应用题'">
                    <div
                      class="xiaoStem"
                      v-html="xiao.itemInfo.testItemContent"
                    ></div>
                    <div v-if="isAnswers" class="analysisBox">
                      <div class="analyTitle">解析详情</div>
                      <div
                        class="anlysisHtml"
                        v-html="xiao.itemInfo.analysis"
                      ></div>
                    </div>
                  </template>
                  <!-- 应用 -->
                  <!-- 填空 -->
                  <template v-if="xiao.itemInfo.questionTypes == '填空题'">
                    <div
                      class="xiaoStem"
                      v-html="xiao.itemInfo.testItemContent"
                    ></div>
                    <div class="xiaoOption">
                      <div
                        v-for="option in xiao.itemInfo.answerList"
                        class="xiaoOptionItem"
                      >
                        <div class="optionInput">
                          <div v-html="option.answerContent"></div>
                        </div>
                      </div>
                    </div>
                    <div v-if="isAnswers" class="analysisBox">
                      <div class="analyTitle">解析详情</div>
                      <div
                        class="anlysisHtml"
                        v-html="xiao.itemInfo.analysis"
                      ></div>
                    </div>
                  </template>
                  <!-- 填空 -->
                  <div v-if="!isAnswers" class="labelBox">


                    <div class="labelItem">
                      <span>题型辨识</span>
                      <div class="right"></div>
                    </div>
                    <div class="labelItem">
                      <span>条件翻译</span>
                      <div class="right"></div>
                    </div>
                    <div class="labelItem">
                      <span>计算</span>
                      <div class="right"></div>
                    </div>

                  </div>
                </div>

                <div v-if="!isAnswers"
                     class="answerSheet pdf-group-item pdf-split-page"
                     style="height: 1415px;width: 666px;margin: 0 auto;box-sizing: border-box;padding: 25px 0"
                >
                  <div class="pdf-group-item"
                       style="height: calc(100% - 10px); border: 1px red solid;border-radius: 15px">
                    <div style="height: 50px;line-height: 50px;color: red;font-size: 15px;text-align: center">
                      请在各题目的答题区域内作答，超出黑色边框限定区域的答案无效！
                    </div>
                    <div style="border: 1px black solid;height: calc(100% - 100px);margin:0 10px;"></div>
                    <div style="height: 50px;line-height: 50px;color: red;font-size: 15px;text-align: center">
                      请在各题目的答题区域内作答，超出黑色边框限定区域的答案无效！
                    </div>

                  </div>


                </div>


              </div>
            </div>
          </div>
        </div>
<!--        <div v-if="testQuestionsInFo.length < 10" class="errorBottom">-->
<!--          没有更多的题目了-->
<!--        </div>-->
      </div>
    </div>

    <el-button class="pdfBtntestPaper" type="text" @click="handleOutput"
    >试卷导出
    </el-button
    >
    <el-button class="pdfBtn" type="text" @click="handleOutput2Answers"
    >答案导出
    </el-button
    >
    <!-- <el-button @click="exportToWord('pdfDomWrong')" class="pdfBtn" style='top:40px' type="text"
      >word导出</el-button
    > -->
  </div>
</template>
<script>
import {getwrongQuestionDetail} from "../../../api/studentEnd/analysisOfTheStudents";
import {exportPDF} from "@/utils/htmlToPdf.js";
import docx from 'html-docx-js/dist/html-docx';
import {PdfLoader} from "@/utils/pdfPro/pdfLoader";
import {customPdfLoader} from "@/utils/customPdfLoad/customPdfLoad";

export default {
  props: {
    id: {
      require: false,
      default: "",
    },
  },

  data() {
    return {
      testPaperData: {},
      form: {
        bigProblem: 0, //大题数量
        questions: 0, //小题数量
        totalPoints: 0, //总分
        testPaperClassificationId: null, //试卷分类id
        examinationPaperSummaryName: "",
        examinationPaperDetailsList: [],
      },
      testQuestionsInFo: [],
      isAnswers: false
    };
  },
  mounted() {
    this.getTestPaperDetail(this.$route.query.examinationPaperSummaryId);
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },
  methods: {
    //获取试卷详情(回显)
    getTestPaperDetail(val) {
      getwrongQuestionDetail(val).then((res) => {
        if (res.code == 200) {
          let quert = [];
          let arr = res.data.errorTestPaperDetailsList;
          arr.forEach((ele, index) => {
            let xiaoObj = {
              itemBankId: ele.itemBankId,
              itemInfo: ele.itemBank,
              fenzhi: 0,
              fenzhiIsNull: false,
              sort: index + 1,
            };
            quert.push(xiaoObj);
          });

          this.$set(this, "testQuestionsInFo", quert);
        }
      });
    },

    //每个大题的总分
    setFenzhi(n) {
      // console.log(n,this);
      let amount = 0;
      n.xiao.forEach((ele) => {
        amount += Number(ele.fenzhi);
      });
      return amount;
    },
    scrollToElement(elementId) {
      var element = document.getElementById(elementId);
      if (element) {
        element.scrollIntoView({behavior: "smooth"}); // 平滑滚动
      }
    },
    //导出pdf------ 数据统计汇总为导出文件名称；my_table_1为要导出的dom元素id
    exportData() {
      console.log(this.form.examinationPaperSummaryName);
      exportPDF("错题训练", "pdfDomWrong");
    },
    //异步导出
    changeBu(type) {
      return new Promise((resolve, reject) => {
        this.isAnswers = type
        resolve()
      })
    }

    ,

    //新pdf导出测试
    async handleOutput2Answers() {


      let el = document.querySelector(`.pdf-panel-answers`);
      var clientH = el.clientHeight;
      var clientW = el.clientWidth;
      el.style.height = el.scrollHeight + "px"; //把要导出的元素高度设置为滚动高度
      el.style.maxWidth = 1000 + "px"; //把要导出的元素

      await this.changeBu(true)


      const loading = this.$loading({
        lock: true,
        text: "导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        baseY: 30
      });

      setTimeout(() => {
        const element = document.querySelector(".pdf-panel-answers");


        console.log(element)
        const pdfLoader = new PdfLoader(element, {
          fileName: this.form.examinationPaperSummaryName,
          direction: "p",
          isPageMessage: true,
          baseY: 10,
          // scale:4
          // itemName: 'answerSheet',

        });

        pdfLoader.getPdf().then((res) => {
          console.log("[ 导出成功] >", res);
          loading.close();
          this.$message.success("导出成功");
          el.style.height = clientH + 'px'
          el.style.maxWidth = clientW + 'px'
          // this.isPrinting=false
        });
      }, 300)

    },
    //自定义pdf导出
    async handleOutput() {

      const loading = this.$loading({
        lock: true,
        text: "导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        baseY: 30
      });

      await this.changeBu(false)

      let el = document.querySelector(`.pdf-panel-answers`);
      var clientH = el.clientHeight;
      var clientW = el.clientWidth;
      el.style.height = el.scrollHeight + "px"; //把要导出的元素高度设置为滚动高度
      el.style.maxWidth = 1000 + "px"; //把要导出的元素
      console.log(el.style)

      setTimeout(() => {
        const pdfConent = document.querySelector('.pdf-panel-answers')
        let pdf = new customPdfLoader(pdfConent, {sliceHeight: 1415})

        pdf.getPdf().then((res) => {
          console.log(res, '456789')
          loading.close()
          el.style.height = clientH + 'px'
          el.style.maxWidth = clientW + 'px'
        });
      }, 1000)

    },


    exportToWord(elementId) {
      // const content = this.$refs[elementId]; // 获取div元素，或者通过Vue的ref来获取
      const content = document.getElementById(elementId) // 获取div元素，或者通过Vue的ref来获取
      console.log(content);
      const converted = docx.asBlob(content.outerHTML, {orientation: 'portrait', margins: {top: 720}});

      // 创建下载链接
      const downloadLink = document.createElement('a');
      downloadLink.href = URL.createObjectURL(converted);
      downloadLink.download = 'document.docx';

      // 触发下载
      downloadLink.click();
    }
  },

  beforeRouteLeave(to, from, next) {
    const obj = {path: this.$route.path, name: this.$route.name};
    this.$tab.closePage(obj);
    console.log(from);
    next();
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  padding: 0 80px;
  height: 100%;
  background-color: #f1f3f8;
  position: relative;

  > .left {
    width: 300px;
    background-color: white;
    height: calc(100% - 30px);
    position: absolute;
    top: 15px;
  }

  > .center {
    flex: 1;
    background-color: white;
    margin: 15px;
    overflow: auto;
  }

  > .right {
    width: 200px;
    margin-top: 15px;

    > div:nth-of-type(1) {
      height: 200px;
      background-color: white;
      display: flex;
      flex-direction: column;
      align-items: center;

      .countdown {
        text-align: center;

        > div {
          margin: 10px 0;
          font-size: 12px;
        }

        > span {
          color: red;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}

.bigQuestionItem {
  width: 100%;
  min-height: 50px;
  padding: 10px 15px;

  .bigTopInFo {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .bigBottomInFo {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;

    .bigBottomXiaoItem {
      height: 25px;
      width: 25px;
      line-height: 25px;
      text-align: center;
      border: 1px #eee solid;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.line {
  height: 1px;
  background-color: #eee;
}

/**
  题干
  */

.topicBox {
  //margin-bottom: 15px;
  //border: 1px solid #ebeef6;

  .topicBottom {
    .topicBottomContent {
      .errBottom {
        text-align: center;
        color: #656577;
        line-height: 150px;
        font-size: 12px;
      }
    }

    .topicBottomFooter {
      height: 70px;
      display: flex;
      align-items: center;
      margin: 0 15px;
      border-top: 1px solid #ebeef6;
    }
  }
}

.xiaoItem {
  padding: 0 15px;
  //margin-bottom: 10px;

  .xiaoInFo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;

    > div {
      display: flex;
      align-items: center;

      i {
        margin-left: 5px;
        color: #656577;
      }

      > .el-form {
        .el-form-item {
          margin-bottom: 0;
        }
      }
    }
  }

  .xiaoContent {
    min-height: 300px;

    .xiaoStem {
      /*border: 1px solid #ebeef6;*/
      padding: 10px;
    }

    .xiaoOption {
      .el-radio-group {
        width: 100%;
      }

      .xiaoOptionItem {
        display: flex;
        align-items: center;

        .optionInput {
          width: 100%;
          flex: 1;
          /*border: 1px solid #ebeef6;*/
          margin: 5px;

          > div {
            padding: 0 10px;
          }
        }

        .optionInputBtn {
          opacity: 0;
          height: 100%;

          i {
            color: #656577;
          }
        }
      }

      .xiaoOptionItem:hover {
        /* .optionInput {
            border: 1px solid #3a63f3;
          }*/
        .optionInputBtn {
          height: 100%;
          opacity: 1;

          i {
            color: #656577;
          }
        }
      }
    }

    .analysisBox {
      //display: none;
      .analyTitle {
        font-size: 14px;
        margin: 10px 0;
      }

      .anlysisHtml {
        border: 1px solid #ebeef6;
        padding: 10px;
      }
    }
  }
}

.errorBottom {
  text-align: center;
  height: 100px;
  line-height: 100px;
  color: #656577;
}

.pdfBtntestPaper {
  position: absolute;
  top: 20px;
  right: 200px;
}

.pdfBtn {
  position: absolute;
  top: 20px;
  right: 120px;
}


.labelBox {
  padding: 0 10px;

  .labelItem {
    height: 40px;
    //border: 1px solid red;
    margin-bottom: 10px;
    line-height: 40px;
    display: flex;

    > span {
      min-width: 80px;
    }

    .right {
      flex: 1;
      border: 1px solid red;
    }
  }
}

//答题卡
.answerSheet {
  box-sizing: border-box;
}
</style>
